<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>18001010803 王凯</title>
    <link rel="stylesheet" href="./download55zf/font_2249885_v6trtuzazmi/iconfont.css">
    <link rel="stylesheet" href="./swiper-bundle.min.css">
    <style>
        body{
            padding: 0;
            margin: 0;
        }
        .a{
            padding-left: 7px;
            position: relative;
            background-color: red;
            font-size: 1.5rem;
            color: #fff;
        }
        .a ul{
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
        }
        .a li{
            width: 33%;
        }
        .a span{
            position: absolute;
            top: 5px;
            right: 5px;
            font-size:1.5rem;
        }
        .yc{
            text-align: center;
        }
        a{
            text-decoration: none;/*链接 去下划线*/
        }
        .b{
            border: 1px solid  rgb(233, 227, 227);
            border-radius: 2px;
            background-color: rgb(233, 227, 227);
            color: rgb(180, 174, 174);
            width: 90%;
            margin: 5px auto;
        }
        .b h2{
            margin: 0;
            font-size: 1.3rem;
        }
        .b span{
            font-size: 1.3rem;
        }
        .c ul{
            margin-bottom: 0;
            display: flex;
            list-style: none;
            padding: 0;
            text-align: center;
        }
        .c li{
            width: 20%;
        }
        .c span{
            border: 5px solid red;
            border-radius: 50%;
            font-size: 2.5rem;
            background-color: red;
            color: #fff;
        }
        .d{
            position: relative;
        }
        .d h2{
            margin: 0;
        }
        .d a{
            border: 1px solid rgb(201, 204, 197);
            border-radius: 3px;
            background-color: rgb(201, 204, 197);
            font-size: .5rem;
            position: absolute;
            right: .3rem;
            top: 1.3vh;
        }
        .d ul{
            margin-bottom: 0;
            padding-left: 3px;
            list-style: none;
            display: flex;
        }
        .d li{
            padding-right: 10px;
        }
        .d img{
            width: 100%;
            border: 3px solid rgb(121, 117, 117);
            border-radius: 5px;
        }
        .p{
            border: 1px solid orange ;
            border-radius: 3px;
            background-color: orange;
            color: #fff;
            margin: 0;
            width: 73%;
            font-size: 0.1rem;
        }
        .pp{
            border: 1px solid orchid;
            border-radius: 3px;
            background-color: orchid;
            color: #fff;
            margin: 0;
            width: 73%;
            font-size: 0.1rem;
        }
        .time{
            font-size: .7rem;
            color: #000;
        }
        #slide img{
            width: 100%;
        }
        #slide{
            margin-left:3px;
            margin-right: 3px;
        }
        .fh2{
            margin: 10px auto 10px;
            margin-left: 5px;
            font-size: 1rem;
        }
        .f ul{
            margin-bottom: 0;
            padding-left: 3px;
            list-style: none;
            display: flex;
        }
        .f li{
            padding: 5px;
        }
        .f img{
            border: 1px solid #fff;
            border-radius: 50%;
            width: 100%;
        }
        .f .pt{
            font-size: .2rem;
            margin: 0;
        }
        .f .ppt{
            font-size: .2rem;
            color: rgb(162, 165, 159);
            margin: 0;
        }
        .gh2{
            font-size: 1rem;
        }
        .g img{
            display: block;
            border: none;
        }
        ul{
            list-style: none;
        }
        .g{
            display: flex;
            flex-wrap: wrap;
            padding: 5px;

        }
        .g>li{
            width: 40%;
            flex-grow: 1;
            margin-bottom: 12px;
        }
        .g>li:nth-child(odd){
            margin-right: 5px;
        }
        .g img{
            width: 100%;
        }
        .g h2{
            
            margin: 1px;
            font-size: .8rem;
        }
        .g .time{
            color: rgb(156, 153, 153);
            font-size: .3rem;
        }
        .g .qs{
            margin: 0;
            color: red;
            font-size: 1.3rem;
        }
        .qs span{
            font-size: 1rem;
        }
        #hide{
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            font-size: 10px;
            z-index: 999;/*重点*/
            background-color:#fff;
        }
        #hide ul{
            list-style: none;
            display: flex;
            text-align: center;
            padding: 0;
            margin: 0;
           
        }
        #hide li{
            padding-top: 5px;
            width: 20%;
        }
        #hide span{
            color: rgb(158, 152, 152);
        }
        .zx a{
            color:rgb(158, 152, 152);
        }
        .zx{
            padding: 0;
            margin-top: 3px;
            margin-bottom: 5px;
        }
    </style>
</head>
<body>
    <!-- a -->
    <div class="a">
        <ul>
            <li><a href="#" style="color: #fff;">大连∨</a></li>
            <li class="yc">演出</li>
            <li><span class="iconfont icon-search"></span></li>
        </ul>
    </div>
    <!-- b -->
    <div class="b">
        <h2>&nbsp&nbsp<span class="iconfont icon-search">&nbsp&nbsp</span>找明星、演出、场馆</h2>
    </div>
    <!-- c -->
    <div class="c">
        <ul>
            <li>
                <span class="iconfont icon-ic_local_play_px"></span>
                <p>演唱会</p>
            </li>
            <li>
                <span class="iconfont icon-xinigejuyuan"></span>
                <p>话剧歌剧</p>
            </li>
            <li>
                <span class="iconfont icon-zhanlan"></span>
                <p>休闲展览</p>
            </li>
            <li>
                <span class="iconfont icon-xiangshengpingshu"></span>
                <p>戏曲相声</p>
            </li>
            <li>
                <span class="iconfont icon-qinzi"></span>
                <p>亲自/艺术</p>
            </li>
        </ul>
    </div>
    <!-- d -->
    <div class="d">
        <h2>今日必抢<a href="#" style="color: rgb(129, 131, 125);">更多必抢 ></a></h2>
        <ul class="vlist"></ul>
        <script>
            var data=[
            {
                img:"./tp/4a.jpg",
                type:"🏷套票8折起",
                t:"",
                time:"开心麻花爆笑舞台剧《谈判专家》",
            },
            {
                img:"./tp/4b.jpg",
                type:"",
                t:"🏷本周演出",
                time:"加拿大原版全场互动亲子剧《你是..."
            },
            {
                img:"./tp/4c.jpg",
                type:"🏷套票8折起",
                t:"",
                time:"开心麻花爆笑舞台剧《乌龙山伯爵》"
            }
        ];
        var vlist=document.querySelector(".vlist");
        data.forEach((v,i)=>{
            let li=document.createElement("li");
            li.innerHTML=`
                <img src="${v.img}">
                <p class="p">${v.type}</p>
                <p class="pp">${v.t}</p>
                <span class="time">${v.time}</span>`;
            vlist.appendChild(li);//添加到网页显示
        })
        </script>
        <!-- e -->
        <div class="swiper-container" id="slide">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="./tp/4h1.jpg"></div>
                <div class="swiper-slide"><img src="./tp/4h2.jpg"></div>
            </div>
        </div>
        <script src="./swiper-bundle.min.js"></script>
        <div class="swiper-pagination"></div>
        <div class="swiper-pagination"></div>
            <script>
                var slide = new Swiper('#slide', {
                    pagination: {
                    el: '.swiper-pagination'},
                    autoplay: {
                    delay: 1500,
                    disableOnInteraction: true,
                    }
                });
            </script>
        </div>
        <!-- f -->
        <h2 class="fh2">大咖新动态</h2>
        <div class="f">
            <ul class="vlistt"></ul> 
        </div>
            <script>
                var data=[
                {
                    img:"./tp/rt1.jpg",
                    type:"鲍勃.伦",
                    t:"有新动态"
                },
                {
                    img:"./tp/rt2.jpg",
                    type:"谢天笑",
                    t:"有新动态"
                },
                {
                    img:"./tp/rt33.jpg",
                    type:"王一芝",
                    t:"抢票倒计时"
                },
                {
                    img:"./tp/rt4.jpg",
                    type:"安美凌",
                    t:"有新动态"
                },
                {
                    img:"./tp/rt5.jpg",
                    type:"安德鲁",
                    t:"演出开始"
                }
            ];
            var vlist=document.querySelector(".vlistt");
            data.forEach((v,i)=>{
                let li=document.createElement("li");
                li.innerHTML=`
                    <img src="${v.img}">
                    <h2 class="pt">${v.type}</h2>
                    <p class="ppt">${v.t}</p>`;
                vlist.appendChild(li);//添加到网页显示
            })
            </script>
      <!-- G -->
      <h2 class="gh2">为你推荐</h2>
      <div class="gg">
          <ul class="g"></ul>
      </div>
      
      <script>
          var dataa=[
              {
                  i:"./tp/4j1.jpg",
                  type:"[大连]开心麻花爆笑舞台剧《乌龙山伯爵》",
                  time:"2020.12.8 19:17 周五",
                  qs:"￥80元<span>起</span>",
                  qwe:""
              },
              {
                i:"./tp/4j2.jpg",
                  type:"[大连]开心麻花爆笑舞台剧《谈判专家》",
                  time:"2020.12.14 19:35 周四",
                  qs:"￥80元<span>起</span>",
                  qwe:""
              },
              {
                i:"./tp/4j3.jpg",
                  type:"[大连]正版授权超大型实景舞台剧《奥特曼-宇宙...",
                  time:"2020.12.15-2020.12.16",
                  qs:"￥100元<span>起</span>",
                  qwe:""
              },
              {
                  i:"./tp/4j4.jpg",
                  type:"[大连]开心麻花爆笑舞台剧《婿事待发》",
                  time:"2020.12.20 19:10 周四",
                  qs:"￥19.9元<span>起</span>",
                  qwe:""
              },
              {
                  i:"./tp/4j5.jpg",
                  type:"[大连]《嗨， 2021》--大连2021跨年音乐会",
                  time:"2020.12.21-2020.12.25",
                  qs:"￥80元<span>起</span>",
                  qwe:"&nbsp"
              },
              {
                  i:"./tp/4j6.jpg",
                  type:"[大连]大连梵高梦境星空馆大连正式开馆",
                  time:"2021.1.1-2020.1.10",
                  qs:"￥60元<span>起</span>",
                  qwe:"&nbsp"
              }
          ];
          var g=document.querySelector(".g");
          dataa.forEach((v,i)=>{
              let li=document.createElement("li");
              li.innerHTML=`
                  <img src="${v.i}">
                  <h2 class="name">${v.type}</h2>
                  <span class="time">${v.time}</span>
                  <p class="qs">${v.qs}</P>
                  <p>${v.qwe}</p>`;
              g.appendChild(li);//添加到网页显示
          })
      </script>
      <!-- h -->
          <div id="hide">
            <ul>
                <li>
                    <span class="iconfont icon-mao"></span>
                    <p class="zx"><a href="index.html">首页</a></p>
                </li>
                <li>
                    <span class="iconfont icon-dianying1"></span>
                    <p class="zx"><a href="dxm2.html">电影/影院</a></p>
                </li>
                <li>
                    <span class="iconfont icon-xiaoshipin"></span>
                    <p class="zx"><a href="dxm3.html">小视频</a></p>
                </li>
                <li>
                    <span class="iconfont icon-yanchu"style="color:rgb(238, 132, 113);"></span>
                    <p class="zx"><a href="dxm4.html" style="color:rgb(238, 132, 113);">演出</a></p>
                </li>
                <li>
                    <span class="iconfont icon-wode" ></span>
                    <p class="zx"><a href="dxm5.html" >我的</a></p>
                </li>
            </ul>
        </div>
</body>
</html>